<div class="d-flex justify-content-start flex-wrap gap-3">
    {% for img in mcimgs %}
    <div class="card cardwh position-relative">
        <input class="form-check-input position-absolute top-0 end-0 m-2" type="checkbox" value="" id="flexCheckChecked">
        <a href="{{ img.url }}" data-fancybox="group" data-caption="{{ img.srcfile }}">
            <img src="{{ img.url }}" alt="{{ img.srcfile }}"/>
        </a>
        <div class="card-body">
            <p class="card-text">{{ img.srcfile }} ({{ img.size }} M)</p>
        </div>
    </div>
    {% endfor %}
</div>

<div class="d-flex justify-content-start mt-3">
    <!-- bootstrap 分页 -->
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
            {{ pagehtml | safe }}
        </ul>
    </nav>
    
</div>